<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>easyUploader示例</title>
    <link rel="stylesheet" href="./main.css">
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="uploader"></div>
    </div>

    <script src="./easyUploader.jq.js"></script>
    <script>
        var uploader = easyUploader({
            id: "uploader",
            accept: '.jpg,.png,.doc,.docx',
            action: 'https://jsonplaceholder.typicode.com/posts/',
            dataFormat: 'formData',
            maxCount: 10,
            maxSize: 3,
            multiple: true,
            data: null,
            beforeUpload: function(file, data, args) {
                /* dataFormat为formData时配置发送数据的方式 */
                data.append('token', '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT');
                data.append('otherKey', 'otherValue');

                /* dataFormat为base64时配置发送数据的方式 */
                // data.base = file.base;
                // data.token = '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT';
                // data.otherKey = 'otherValue';
            },
            onChange: function(fileList) {
                /* input选中时触发 */
            },
            onRemove: function(removedFiles, files) {
                console.log('onRemove', removedFiles);
            },
            onSuccess: function(res) {
                console.log('onSuccess', res);

                /* 通过实例的files熟悉可以访问上传文件 */
                var files = uploader.files;
                console.log('files', files);
        
                /*
                    files中各个字段值表示意思如下
                    ajaxResponse: ajax的的响应结果
                    base: 文件的base64编码
                    checked: 该文件是否被选中
                    file: 文件对象
                    id: 插件内部标识的文件id
                    isImg: 插件内部标识文件时否是图片
                    previewBase: 文件压缩后的base64编码，用于插件内部展示预览图
                    uploadPercentage: 文件上传进度百分比值
                    uploadStatus: 文件上传状态
                */
            },
            onError: function(err) {
                console.log('onError', err);
            },
        });
    </script>
</body>
</html>